<template>
  <div>
    <div class="hmx-tab">
      <ZanTab v-bind="tab1" :componentId="'tab1'" @change="handleZanTabChange" />
    </div>
    <div v-if="tab1.selectedId === 'notice'">
      <!-- 通知 -->
      <notice />
    </div>
    <div v-else-if="tab1.selectedId === 'msg'">
      <!-- 消息 -->
    </div>
  </div>
</template>

<script>
import ZanTab from "../../components/zan/tab";
import Notice from "../../components/notice";

export default {
  data() {
    return {
      tab1: {
        list: [
          {
            id: "notice",
            title: "通知"
          },
          {
            id: "msg",
            title: "消息"
          }
        ],
        scroll: false,
        selectedId: "notice"
      }
    };
  },

  components: {
    ZanTab,
    Notice
  },

  methods: {
    ...ZanTab.methods,
    handleZanTabChange(e) {
      const { componentId, selectedId } = e;
      this[componentId].selectedId = selectedId;
    }
  },

  created() {}
};
</script>

<style>
.hmx-tab .zan-tab__bd > div {
  width: 100%;
}
.hmx-tab .zan-tab__item {
  width: 50%;
}
</style>
